
<!DOCTYPE html>
<html lang="">
<head>  
<meta charset="utf-8">
<title>Gallerie des articles postés </title>


<style type="text/css">

* {
	margin: 0;
	padding: 0;
}

img {border: none;}

a {outline: none;}

body {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	background: url(images/post-BG.png) repeat;
	text-align: center;
	color: #fff;
}

h1 {
	margin: 30px 0 0 0;
	text-shadow: #d6d6d6 0px 1px 2px;
	color: #030303
}

h3 {
	margin: 10px 0 10px 0;
	text-shadow: #d6d6d6 0px 1px 2px;
	color: #030303
}



/* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
		
	}
	
	50% { 
		opacity: 0;
	}
	
	100% { 
		opacity: 1;
	}
}

#box {
	text-align: left;
	width: 700px;
	margin: 30px auto 0 auto;
	background: #000;
	overflow: hidden;
	border: 10px solid #000;
	-webkit-box-shadow: #131313 0px 2px 10px;
	-moz-box-shadow: #131313 0px 3px 10px;
	box-shadow: #131313 0px 3px 10px;	
	-webkit-animation-name: fadeIn; 
  	-webkit-animation-duration: 3s; 
  	-webkit-animation-iteration-count: 1;
  	-webkit-animation-delay: 0s;
}

ul#slider{
	-webkit-border-radius: 10px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	width: 700px;
	height: 438px;
	overflow: hidden;	
}

ul#thumb {
	overflow: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	background: #000;
	overflow: auto;
	width: 700px;
}

ul#thumb a {
	-webkit-transition: opacity .2s ease-in-out;
	border: 1px solid #979797;
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	float: right;
	margin: 10px 0px 0px 10px;
	opacity: 0.75;
}

ul#thumb a:hover {
	opacity: 1;
} 

ul#slider li {	
	width: 700px;
	height: 438px;
	position: absolute;
	}
	
ul#slider li p {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: inherit;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	width: 100%;
}

ul#slider li p span {
	line-height: 1.2em;
	padding: 10px;
	display: block;
}

/* Animation for the :target image. Slides the image in. */

@-webkit-keyframes moveTarget {
	0% {
		left:-700px;
		
	}
	
	100% { 
		left:0px;
	}
}


ul#slider li:target {
	-webkit-animation-name: moveTarget; 
	-webkit-animation-duration: .5s; 
	-webkit-animation-iteration-count: 1;
	top:0px;
	left: 0px;
	z-index: 10;
}

/*
Animation for the current image. Slides it out the frame and back to the starting position. 
Adds a lower z-index than the now current image.
*/

@-webkit-keyframes moveIt {
	0% {
		left:0px;
		
	}
	50% {
		left:700px;
		
	}
	100% { 
		left:-700px;
		z-index: 5;
	}
}

ul#slider li:not(:target) {
	-webkit-animation-name: moveIt; 
  	-webkit-animation-duration: 1.5s; 
  	-webkit-animation-iteration-count: 1;
	top:0px;
	left: 0px;
}

</style>

</head>

<body>

<h1>Gallerie des articles postés </h1>


<div id="box">

<ul id="slider">
	<li id="1" >
		<img src="images/grass-blades.jpg" alt="grass-blades" width="700" height="438" />
		<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
	</li>
	<li id="2">
		<img src="images/ladybug.jpg" alt="ladybug" width="700" height="438" />
		<p><span>Mind your step!</span></p>
	</li>
	<li id="3">
		<img src="images/lotus.jpg" alt="lotus" width="700" height="438" />
		<p><span>This is an image of a big flower!</span></p>
	</li>
	<li id="4">
		<img src="images/stones.jpg" alt="stones" width="700" height="438" />
		<p><span>Damn! Those are some nice looking stones!</span></p>
	</li>
</ul>

<ul id="thumb">
	<li><a href="#1"><img src="images/grass-blades.jpg" alt="grass-blades" width="50" height="50" /></a></li>
	<li><a href="#2"><img src="images/ladybug.jpg" alt="ladybug" width="50" height="50" /></a></li>
	<li><a href="#3"><img src="images/lotus.jpg" alt="lotus" width="50" height="50" /></a></li>
	<li><a href="#4"><img src="images/stones.jpg" alt="stones" width="50" height="50" /></a></li>
</ul>

</div>


</body>
</html>